<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专家风采</title>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <style type="text/css">
        #div1{
            width: 600px;
            height: 200px;
            text-align: center;
            /*border: 1px orange solid;*/
            margin: auto;
            padding-top: 10%;
        }
        #table{
            width: 600px;
            height: 200px;
            text-align: center;
            border: 1px palegreen solid;
        }
        #table,tr,th,td{
            height: 20px;
            font-size: 16px;
            border: 1px gold solid;
        }
    </style>
    <script type="text/javascript">
    $(function(){
      var id = $("#hit").val();
        $.ajax({
            url: "/getDoctorByDepartmentId",
            type: "GET",
            data: {
              "departmentId": id
            },
            dataType: "json",
            success: function(doctorList){
                show(doctorList);
            },
            error:function(doctorList){
                alert("医生风采查询失败！");
            }
        });

    function show(doctorList){
      var strS =  "<table id='table'>"+"<tr><th>医生姓名</th><th>医生年龄</th><th>医生性别</th><th>医生简介</th><th>挂号费用</th></tr>";
      var strM =  "</table>";
      var str = "";
      for (var i = 0; i < doctorList.length; i++) {
        str += "<tr>"
                +"<td>" + doctorList[i].dName + "</td>"
                +"<td>" + doctorList[i].dAge + "</td>"
                +"<td>" + doctorList[i].dGender + "</td>"
                +"<td>" + doctorList[i].dDesc + "</td>"
                +"<td>" + doctorList[i].registrationFee + "</td>"
                +"</tr>";
      }
      $("#div1").append(strS+str+strM);
    }
    <!-- 隔行变色 -->
    $(function () {
        $("tr:gt(0):odd").css("background-color","#fb80b5");
        $("tr:gt(0):even").css("background-color","#e0fb6e");
    });
    })
  </script>
</head>
<body>
<div id="div1">
    <!-- thymeleaf语法-->
  <input id="hit" type="hidden" th:value="${departmentId}">
    <h1>专家(医生)信息</h1>

</div>
</body>
</html>